import React from 'react'
import type { ComplianceItem } from '@/types/work'
import { 
  ComplianceType, 
  getRiskLevelOptions, 
  getComplianceStatusOptions 
} from '@/types/work'
import type { CheckItemTemplate } from '@/types/template'

interface ComplianceFormFieldsProps {
  formData: Partial<ComplianceItem>
  errors: Record<string, string>
  mode: 'create' | 'edit'
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void
  isDataSecurityAssessment?: boolean
  currentMaturityLevel?: number
  onMaturityLevelChange?: (level: number) => void
  isLoadingTemplateItems?: boolean
  templateItems?: CheckItemTemplate[]
  assessmentType?: string
}

const ComplianceFormFields: React.FC<ComplianceFormFieldsProps> = ({
  formData,
  errors,
  mode,
  onChange,
  isDataSecurityAssessment = false,
  currentMaturityLevel = 1,
  onMaturityLevelChange,
  isLoadingTemplateItems = false,
  templateItems = [],
  assessmentType
}) => {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium text-foreground">
        {formData.compliance_type === ComplianceType.RISK ? '风险项信息' : '保障项信息'}
      </h3>
      
      {/* 标题 */}
      <div>
        <label htmlFor="title" className="block text-sm font-medium text-foreground mb-1">
          标题 <span className="text-destructive">*</span>
        </label>
        <input
          type="text"
          id="title"
          name="title"
          value={formData.title || ''}
          onChange={onChange}
          className={`w-full rounded-md border ${errors.title ? 'border-destructive' : 'border-input'} bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary`}
          placeholder="输入检查项标题"
          readOnly={mode === 'edit'}
        />
        {errors.title && (
          <p className="mt-1 text-sm text-destructive">{errors.title}</p>
        )}
      </div>

      {/* 成熟度等级选择器（仅数据安全评估且编辑模式下显示） */}
      {isDataSecurityAssessment && mode === 'edit' && (
        <div>
          <label className="block text-sm font-medium text-foreground mb-1">
            成熟度等级 <span className="text-destructive">*</span>
            {isLoadingTemplateItems && (
              <span className="ml-2 text-xs text-muted-foreground">加载中...</span>
            )}
          </label>
          <div className="bg-muted/30 rounded-lg p-4 border border-gray-300">
            <div className="flex items-center justify-start gap-3 mb-3">
              {[1, 2, 3, 4, 5].map((level) => {
                // 检查该等级是否有对应的模板内容
                const hasTemplateContent = templateItems?.some(item => item.maturity_level === level) ?? false
                const isDisabled = isLoadingTemplateItems || !hasTemplateContent
                
                return (
                  <button
                    key={level}
                    type="button"
                    onClick={() => onMaturityLevelChange?.(level)}
                    disabled={isDisabled}
                    className={`
                      w-12 h-12 rounded-full font-medium text-base transition-all
                      ${currentMaturityLevel === level
                        ? 'bg-slate-900 text-white shadow-lg'
                        : hasTemplateContent
                          ? 'bg-white text-slate-900 border-2 border-slate-200 hover:border-slate-400'
                          : 'bg-gray-100 text-gray-400 border-2 border-gray-200 cursor-not-allowed'
                      }
                      disabled:opacity-50 disabled:cursor-not-allowed
                    `}
                    title={hasTemplateContent ? `成熟度等级 ${level}` : `成熟度等级 ${level}（无模板内容）`}
                  >
                    {level}
                  </button>
                )
              })}
            </div>
            <p className="text-sm text-muted-foreground">
              点击数字切换成熟度等级，描述和检查指引将自动更新。
            </p>
          </div>
        </div>
      )}
      
      {/* 描述 */}
      <div>
        <label htmlFor="description" className="block text-sm font-medium text-foreground mb-1">
          描述 <span className="text-destructive">*</span>
        </label>
        <textarea
          id="description"
          name="description"
          value={formData.description || ''}
          onChange={onChange}
          rows={3}
          className={`w-full rounded-md border ${errors.description ? 'border-destructive' : 'border-input'} bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary`}
          placeholder="输入检查项详细描述"
          readOnly={mode === 'edit'}
        />
        {errors.description && (
          <p className="mt-1 text-sm text-destructive">{errors.description}</p>
        )}
      </div>
      
      {/* 检查指引 */}
      <div>
        <label htmlFor="guide" className="block text-sm font-medium text-foreground mb-1">
          检查指引 <span className="text-destructive">*</span>
        </label>
        <textarea
          id="guide"
          name="guide"
          value={formData.guide || ''}
          onChange={onChange}
          rows={3}
          className={`w-full rounded-md border ${errors.guide ? 'border-destructive' : 'border-input'} bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary`}
          placeholder="输入如何检查此项的指导说明"
          readOnly={mode === 'edit'}
        />
        {errors.guide && (
          <p className="mt-1 text-sm text-destructive">{errors.guide}</p>
        )}
      </div>
      
      {/* 检查描述 */}
      <div>
        <label htmlFor="inspector" className="block text-sm font-medium text-foreground mb-1">
          检查描述 <span className="text-destructive">*</span>
        </label>
        <textarea
          id="inspector"
          name="inspector"
          value={formData.inspector || ''}
          onChange={onChange}
          rows={3}
          className={`w-full rounded-md border ${errors.inspector ? 'border-destructive' : 'border-input'} bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary`}
          placeholder="输入检查的详细描述"
        />
        {errors.inspector && (
          <p className="mt-1 text-sm text-destructive">{errors.inspector}</p>
        )}
      </div>

      {/* 风险等级（仅风险项） */}
      {formData.compliance_type === ComplianceType.RISK && (
        <div>
          <label htmlFor="risk_level" className="block text-sm font-medium text-foreground mb-1">
            风险等级
          </label>
          <select
            id="risk_level"
            name="risk_level"
            value={formData.risk_level}
            onChange={onChange}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary"
          >
            {getRiskLevelOptions(assessmentType).map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}         
          </select>
        </div>
      )}
      
      {/* 合规状态（仅保障项） */}
      {formData.compliance_type === ComplianceType.GUARANTEE && (
        <div>
          <label htmlFor="compliance_status" className="block text-sm font-medium text-foreground mb-1">
            合规状态
          </label>
          <select
            id="compliance_status"
            name="compliance_status"
            value={formData.compliance_status}
            onChange={onChange}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary"
          >
            {getComplianceStatusOptions(assessmentType).map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      )}
    </div>
  )
}

export default ComplianceFormFields
